<style lang='scss' scoped>
.main{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>
<template>
  <div class="main">
    <!-- 动态组件 -->
    <component :is="currentComponent"></component>
    <tool-bar ref="toolbar" @onChangeFragment="onChangeFragment"></tool-bar>
  </div>
</template>
<script>
import ToolBar from "@c/ToolBar.vue"
export default {
  name:'mymain',
  components: {
    ToolBar,
    home: () => import("@c/Home"),
    shopping: () => import("@c/Shopping"),
    my: () => import("@c/My")
  },
  data() {
    return {
      currentComponent: 'home'
    }
  },
  mounted() {
    this.init()
  },
  activated(){
    this.pushFragment();
  },
  methods: {
    init() {},
    // 组件切换
    onChangeFragment(componentName) {
      this.currentComponent = componentName
    },
    //指定加载的页面组件
    pushFragment(){
      let componentIndex=this.$route.params.componentIndex;
      //没有下标
      if(componentIndex===undefined)return;
      //通过toolbar切换对应组件
      this.$refs.toolbar.pushFragment(componentIndex);
    }
  },
  computed: {}
}
</script>
